<template>
	<view class="dropdown-box">
		<view class="dis-between" :style="style" @click="region_show = true">
			<slot>
				<text class="white-text">{{regionValue}}</text>
				<u-icon name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
			</slot>
		</view>
		<dropdown :Top="Top" :position="positionLabel" :width="dropdownWidth" v-show="region_show" :list="regionList"
			@select="selectBusiness" @close="region_show = false"></dropdown>
	</view>
</template>

<script>
	import Dropdown from '@/components/dropdown/index.vue'
	export default {
		props: {
			regionList: {
				type: Array,
				default: () => []
			},
			radius: {
				type: Number,
				default: () => 16
			},
			Top: {
				type: Number,
				default: () => 82
			},
			size: {
				type: Number,
				default: () => 28
			},
			width: {
				type: String,
				default: () => '424rpx'
			},
			height: {
				type: String,
				default: () => '80rpx'
			},
			dropdownWidth: {
				type: String,
				default: () => '100%'
			},
			positionLabel: {
				type: String,
				default: () => 'left'
			},
			company: {
				type: String,
				default: () => ''
			},
			isAfter: {
				type: Boolean,
				default: () => true
			},
			currentId: {
				type: Number,
				default: () => 0
			}
		},
		components: {
			Dropdown
		},
		data() {
			return {
				region_show: false,
				regionValue: ''
			}
		},
		computed: {
			style() {
				let _this = this;
				return `borderRadius: ${_this.radius}rpx; width: ${_this.width};height: ${_this.height};fontSize: ${_this.size}rpx;`
			}
		},
		mounted() {
			if (!this.currentId) return;
			for (let i in this.regionList) {
				if (this.regionList[i].id === this.currentId) {
					this.selectBusiness(this.regionList[i]);
				}
			}
			// if (!this.regionList || !this.regionList.length) return;
			// this.regionValue = this.isAfter? this.regionList[0].value + this.company: this.company + this.regionList[0].value;
		},
		methods: {
			selectBusiness(val) {
				this.regionValue = this.isAfter ? val.value + this.company : this.company + val.value;
				this.region_show = false;
				this.$emit('click', {
					value: val.value,
					predict: val.predict || 0,
					id: val.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dropdown-box {
		position: relative;

		.dis-between {
			padding: 0 30rpx;
			align-items: center;
			background-color: rgba(255, 255, 255, .1);
		}
	}
</style>
